import {useEffect,useState,} from 'react'
import { Card, DatePicker,Select, Button, Radio,} from "antd";
import { state } from "@/stores";
import { useSnapshot } from "valtio";
import { BorderOutlined } from "@ant-design/icons";
import type { RadioChangeEvent } from "antd";
import type { DatePickerProps } from "antd";
export default function WHeaders({finance}:any) {
    const store = useSnapshot(state)
    const finances = useSnapshot(finance)
    const [brand, setBrand] = useState("");
    const [partition, setPartition] = useState("");
    const [shop, setShop] = useState("");
    const [platform, setPlatform] = useState("");
    const [today, setToday] = useState("1");
    const [date, setDate] = useState<string>("");
    const handleChange1 = (value: string) => {
        setBrand(value);
    };
    const handleChange2 = (value: string) => {
      setPartition(value);
    };
    const handleChange3 = (value: string) => {
      setShop(value);
    };
    const handleChange4 = (value: string) => {
        setPlatform(value);
    };
    const onChange3 = ({ target: { value } }: RadioChangeEvent) => {
      setToday(value);
    };
    const onChange: DatePickerProps["onChange"] = (date, dateString) => {
      console.log(date, dateString);
      setDate(dateString  as any);
      
    };
    const Search = () => {
        finances.getArgs(brand, partition, shop, platform,date,today)
        finances.search()
    }
    useEffect(() => {
      store.getBrand()  
      store.getPartition()
      store.getShop()
    },[])
    return (
        <div>
            <Card className="w-[92%] m-auto mt-10 min-w-[1000px]">
                <div className="w-[100%] m-auto flex">
                    <div className="w-[90%]">
                        <div className="flex align-items:center w-[90%]">
                            <div className="flex m-5 min-w-[100px]">
                                <Select
                                    style={{ width: 120, marginTop: 10 }}
                                    onChange={handleChange1}
                                    defaultValue={"所有品牌"}
                                    options={store.brands  as any}
                                />
                              
                            </div>
                            
                             <div className="flex m-5 min-w-[100px]">
                                <Select
                                    defaultValue="默认分区"
                                    style={{ width: 120, marginTop: 10 }}
                                    onChange={handleChange2}
                                    options={store.partitions as any}
                                />
                            </div>
                            <div className="flex m-5 min-w-[100px]">
                                <Select
                                    defaultValue="全部店铺"
                                    onChange={handleChange3}
                                    style={{ width: 120, marginTop: 10 }}
                                    options={store.shop  as any}
                                />
                            </div>
                            <div className="flex m-5 min-w-[100px]">
                                <Select
                                    defaultValue="全部来源"
                                    onChange={handleChange4}
                                    style={{ width: 120, marginTop: 10 }}
                                    options={store.platform  as any}
                                />
                            </div>
                            <div className="flex mt-7 ml-5 min-w-[200px]">
                                <Radio.Group
                                    options={store.options1  as any}
                                    onChange={onChange3 }
                                    value={today}
                                    optionType="button"
                                />
                            </div>
                            <div className="flex m-7 ml-7 min-w-[150px]">
                                <DatePicker onChange={onChange} />
                            </div> 
                        </div>
                    </div>
                    <div className="w-[10%]">
                        <Button type="primary" className="mt-7" onClick={()=>{
                            Search()
                        }}>
                            <BorderOutlined />
                            查询
                        </Button>
                    </div>
                </div>
            </Card>
        </div>
    )
}
